<div id="sidebar">
    <!-- end breadcrumbs -->
    <ul id="sidenav">
        <?foreach($sections as $key=>$section){?>
        <li<?=($key==0)?' class="act"':''?> value="<?=$section['id']?>"><a><?=$section['name']?></a></li>
        <?}?>
    </ul>
</div>
<div id="chat-messages">
  <form onSubmit="return false;">
    <img src="<?=$_SESSION['user']['avatar']?>" width="48" height="48">
    <textarea type="text" name="text"></textarea>
    <button class="thoughtbot right" onClick="chatPostMessage();">Submit</button>
  </form>
  <div class="clear"></div>
</div>
<script>

  // Current category
  var chat_current_category = <?=$sections[0]['id'];?>

  // Function to generate messages block
  var messages_tpl = '<div class="message"><div><div><a href="#:link:#" target="blank"><img src="#:avatar:#" width="48" height="48"></a></div><div><a href="#:link:#" class="author" target="blank">#:name:#</a><p>#:text:#</p><code>#:date:#</code></div></div></div>';
  function chatBuildMessagesBlock(json){
    var return_html = '';
    $.each(json, function(i, item) {
      return_html = return_html + messages_tpl
      .replace(/#:link:#/g, item.link)
      .replace(/#:avatar:#/g, item.avatar)
      .replace(/#:name:#/g, item.name)
      .replace(/#:text:#/g, item.text)
      .replace(/#:date:#/g, item.date);
    });​
    return return_html;
  }


  // Generating first section messages
  <?if($messages!='null'){?>$('#chat-messages').append(chatBuildMessagesBlock(<?=$messages?>)+'<div style="height:20px;clear:both;"></div>');
  <?}else{?>$('#chat-messages').append('<p class="message">There are no messages yet.</p><div style="height:20px;clear:both;"></div>');<?}?>

  // Clicking on one item from the sections list
  $('#sidenav>li').click(function(){
    var chat_messages = $('#chat-messages');
    var new_html = '';
    chat_messages.find('form').hide();
    chat_messages.find('div.message, p.message').remove();
    chat_messages.append('<div class="loading-animator"></div>');
    $('#sidenav>li.act').removeClass('act');
    $(this).addClass('act');
    chat_current_category = $(this).attr('value');
    $.ajax({
      url: 'index.php?ajax=chat_show_messages&section='+chat_current_category,
      dataType: 'json',
      error:function (xhr, ajaxOptions, thrownError){
        $('#modal-window').empty().html('<div class="error-message">'+xhr.statusText+'</div>');
      },
      success: function(json){
        if(json == null){
          new_html = '<p class="message">There are no messages yet.</p>';
        }else{
          new_html = chatBuildMessagesBlock(json);
        }
      },
      complete: function(){
        chat_messages.find('div.loading-animator').remove();
        chat_messages.find('form').show();
        chat_messages.append(new_html);
      }
    });
  });

  //posting message
  function chatPostMessage(){
    var form_textarea = $('#chat-messages > form').find('textarea');
    if(form_textarea.val() == '') return false;
    var post_data = $('#chat-messages > form').serialize();

    form_textarea.attr('disabled', 'disabled');

    $.ajax({
      url: 'index.php?ajax=chat_post_message&section='+chat_current_category,
      data: post_data,
      dataType: 'json',
      type: 'POST',
      error:function (xhr, ajaxOptions, thrownError){
        $('#modal-window').empty().html('<div class="error-message">'+xhr.statusText+'</div>');
      },
      success: function(json){
        form_textarea.removeAttr('disabled').val('');
        $(chatBuildMessagesBlock(json)).insertAfter('#chat-messages > .clear');
        $('#chat-messages > p.message').remove();
      }
    });
    return false;
  }
</script>